<template>
  
  <div class="container">
    <header>
        用户注册
    </header>
    <div class="context">
        <ul>
            <li>
                <div>手机号码：</div>
                <div><input placeholder="手机号码"></div>
            </li>
            <li>
                <div>密码：</div>
                <div><input placeholder="密码"></div>
            </li>
            <li>
                <div>确认密码：</div>
                <div><input placeholder="确认密码"></div>
            </li>
            <li>
                <div>用户姓名：</div>
                <div><input placeholder="用户姓名"></div>
            </li>
            <li>
                <div>性别：</div>
                <div class="sex">
                    <input type="radio" value="男" checked>男 
                    <input type="radio" value="女">女
                </div>
            </li>
        </ul>
        <button @click="registerToLogin()">注册</button>
    </div>

  </div>


</template>

<script>
export default {

    methods:{
        registerToLogin(){
            this.$router.push("/login")
        }
    }

}
</script>

<style scoped>

.container{
    width: 100%;
}

input{
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}


.container header{
    width: 100%;
    height: 12vw;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.8vw;
    color: #fff;
}

.container .context{
    width: 100%;
}

.container .context ul{
    width: 100%;
}

.container .context ul li{
    display: flex;
    justify-content: left;
    align-items: center;
}

.container .context ul li div:first-of-type{
    width: 20vw;
    margin: 2.5vw ;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}


.container .context ul li .sex{
    width: 20vw;
    margin: 2.5vw ;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
    display: flex;
    width: 6vw;
    height: 3.2vw;
}

.container .context ul li .sex input{
    width: 6vw;
    height: 3.2vw;
    margin: 0 2vw;
}

button{
    border: none;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12vw;
    margin: 2vw auto;
    font-weight: 700;
    color: #fff;
    font-size: 3.8vw;
    background-color: #38CA73;
}


</style>


